<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 500px;
				border: 1px solid lawngreen;
				
				position: relative;
			}
			#ball{
				width: 30px;
				height: 30px;
				border: 1px solid blue;
				border-radius: 50px;
				background-color: #0000FF;
				
				position: absolute;
			}
			#ball1{
				width: 30px;
				height: 30px;
				border: 1px solid blue;
				border-radius: 50px;
				background-color: #0000FF;
				
				position: absolute;
			}
		</style>

	</head>
	<body>
		<div id="box">
			<div id="ball"></div>
			<div id="ball1"></div>
		</div>
		
		<script type="text/javascript">
			var x = 0;
			var y = 0;
			
			var speedX = 2;
			var speedY = 2;
			
			function move(){
				x += speedX;
				y += speedY;
				
				document.getElementById("ball").style.top = y + "px";
				document.getElementById("ball").style.left = x + "px";
				/* document.getElementById("ball1").style.top = y + "px";
				document.getElementById("ball1").style.left = x + "px"; */
				
				if(x <= 0 || (x >= document.getElementById("box").offsetWidth - document.getElementById("ball").offsetWidth)){
					speedX *= -1
				}
				if(y <= 0 || (y >= document.getElementById("box").offsetHeight - document.getElementById("ball").offsetHeight)){
					speedY *= -1
				}
				/* if(x <= 0 || (x >= document.getElementById("box").offsetWidth - document.getElementById("ball1").offsetWidth)){
					speedX *= -1
				}
				if(y <= 0 || (y >= document.getElementById("box").offsetHeight - document.getElementById("ball1").offsetHeight)){
					speedY *= -1
				} */
				setTimeout("move()",5);
				
			}
			move();
		</script>
	</body>
</html>
